<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>骰子</title>

<style>
    *{
        margin: 0;
        padding: 0;
    }

    .box{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 500px;
        height:500px;
        margin:30px auto 0;
        border:1px solid black;
    }

    .dice {
        position: relative;
        width: 300px;
        height: 300px;
        transform-style: preserve-3d;
        transition: all 72s linear;
    }
    .dice:hover {
        transform: rotateX(3600deg) rotateY(3600deg);
    }
    .dice div {
        position: absolute;
        left:0;
        right: 0;
        top: 0;
        bottom: 0;
        color: white;
        font-size: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .dice div:first-child{
        background-color: red;
        transform: translateZ(150px);
    }

    .dice div:nth-child(2){
        background-color: green;
        transform: translateZ(-150px);
    }
    .dice div:nth-child(3){
        background-color: blue;
        transform: rotateX(90deg) translateZ(150px);
    }
    .dice div:nth-child(4){
        background-color: orange;
        transform: rotateY(90deg) translateZ(150px);
    }
    .dice div:nth-child(5){
        background-color: pink;
        transform: rotateX(90deg) translateZ(-150px);
    }
    .dice div:nth-child(6){
        background-color: black;
        transform: rotateY(90deg) translateZ(-150px);
    }

</style>
</head>
<body>
    <div class="box">
        <div class="dice">
            <div class="one">1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
    </div>
</body>
</html>